<template>
  <div id="app">
    <input
      type="text"
      placeholder="SearchByNumber"
      v-model="value"
      @input="format()"
    />
    <ul ref="ul">
      <li
        v-for="(item, index) in list"
        :key="index"
        @mousedown="handleClick($event, item)"
        :style="{ transition: transition }"
        ref="list"
        :data-order="index"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      totalList: [
        '数据1',
        '数据2',
        '数据3',
        '数据4',
        '数据5',
        '数据6',
        '数据7',
        '数据8',
      ],
      value: '',
      target: null,
      transition: '',
    };
  },
  created() {
    this.setList();
  },
  methods: {
    format() {
      if (this.value.includes(',')) {
        const curValueList = this.value.split(',');
        this.getSearch(curValueList);
      } else {
        this.getSearch(this.value);
      }
      if (this.value === '') {
        this.setList();
      }
    },
    //查询列表
    getSearch(arr) {
      this.list = arr;
      this.list = this.totalList.filter((item) => {
        return arr.includes(item);
      });
    },
    //重置列表
    setList() {
      this.totalList.forEach((item, index) => {
        this.$set(this.list, index, item);
      });
    },
    insterAfter(newElement, targetElement) {
      var parent = targetElement.parentNode;
      if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
      } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
      }
    },
    handleClick(e, items) {
      const list = [...this.$refs.ul.getElementsByTagName('li')];
      // console.log(list);
      // console.log('target', e.target);
      const target = e.target;
      const rect = target.getBoundingClientRect();
      // console.log('前', rect);
      const targetRectHeight = rect.height;
      const rectX = rect.x;
      const rectY = rect.y;
      const disX = e.clientX - rectX;
      const disY = e.clientY - rectY;
      const _self = this;
      let curItem = null;
      let curTargetRectY = '';
      document.onmousemove = function (e) {
        const poX = e.clientX - disX;
        const poY = e.clientY - disY;
        _self.transition = 'unset';
        target.style.position = 'absolute';
        target.style.left = poX + 'px';
        target.style.top = poY + 'px';
        list.forEach((item) => {
          if (item === target) {
            return;
          }
          const itemRect = item.getBoundingClientRect();
          const targetRect = target.getBoundingClientRect();
          const itemRectX = itemRect.x;
          const itemRectY = itemRect.y;
          const targetRectX = targetRect.x;
          const targetRectY = targetRect.y;
          curTargetRectY = targetRectY;
          if (
            targetRectY > itemRectY &&
            targetRectY < itemRectY + targetRectHeight
          ) {
            // console.log(item);
            curItem = item;
            return;
          }
        });
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        _self.transition = 'all 0.4s ease-in-out';
        target.style.position = 'static';
        console.log(curItem.dataset.order);
        _self.list.splice(target.dataset.order, 1);
        if (curTargetRectY < _self.$refs.ul.getBoundingClientRect().y) {
          console.log('xxx');
          _self.list.splice(0, 0, items);
          return;
        }
        if (Number(curItem.dataset.order) > Number(target.dataset.order)) {
          _self.list.splice(Number(curItem.dataset.order), 0, items);
        } else {
          _self.list.splice(Number(curItem.dataset.order) + 1, 0, items);
        }
        target.style.left = 'unset';
        target.style.top = 'unset';
        curItem = null;
        document.onmouseup = null;
      };
    },
  },
};
</script>

<style scoped lang="less">
#app {
  font-family: '微软雅黑';
  * {
    padding: 0;
    margin: 0;
  }
  overflow: hidden;
  height: 100vh;
  input {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    outline: none;
    border: 1px solid #e0e0e0;
    width: 500px;
    height: 50px;
    transition: all 0.4s ease-in-out;
    font-size: 20px;
    box-sizing: border-box;
    padding: 0 1em;
    text-shadow: 1px 1px 1px #e0e0e0;

    &::-webkit-input-placeholder {
      font-size: 20px;
      // text-indent: 1em;
      line-height: 50px;
    }
    &:hover {
      box-shadow: 2px 2px 10px black, -2px -2px 10px black;
    }
  }
  ul {
    width: 500px;
    margin: 80px auto 0;
    li {
      user-select: none;
      height: 50px;
      width: 500px;
      border: 1px solid #e0e0e0;
      list-style: none;
      line-height: 50px;
      text-indent: 2em;
      transition: all 0.4s ease-in-out;
      box-sizing: border-box;
      color: darken(#e0e0e0, 30%);
      text-shadow: 1px 1px 1px #e0e0e0;
      cursor: pointer;
      &:hover {
        box-shadow: 2px 2px 10px black, -2px -2px 10px black;
        text-shadow: 1px 1px 1px black;
        color: darken(#e0e0e0, 90%);
      }
    }
  }
}
</style>
